<template>
  <div class="loginbtn" :style="styleObject" @click="$emit('click', $event)">
    <div class="box" :style="styleboxObject">{{ name }}</div>
  </div>
</template>

<script>
import { btnwidth, btnheight } from "@/utils/width";
// @ is an alias to /src
export default {
  name: "GlodBtn",
  props: {
    name: {
      type: String,
      required: true,
    },
    dywidth: {
      type: Number,
      required: true,
    },
    dyheight: {
      type: Number,
      required: true,
    },
    backgroundColor: {
      type: String,
      default: "#313131",
    },
    borRad: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {};
  },
  computed: {
    styleObject() {
      return {
        width: btnwidth(this.dywidth) + "px",
        height: btnheight(this.dyheight) + "px",
        "border-radius": this.borRad + "px",
      };
    },
    styleboxObject() {
      return {
        width: btnwidth(this.dywidth) + "px",
        height: btnheight(this.dyheight) + "px",
        background: this.backgroundColor,
        "border-radius": this.borRad + "px",
      };
    },
  },
  methods: {
    click() {
      this.$refs.loginbtn.click;
    },
  },
};
</script>
<style lang="less" scoped>
.loginbtn {
  width: 302px;
  height: 50px;
  padding: 2px;
  border-radius: 25px;
  overflow: hidden;
  background-image: -webkit-linear-gradient(
    top,
    rgba(254, 247, 179, 1) 0%,
    rgba(227, 139, 28, 1) 30%,
    rgba(253, 243, 176, 1) 60%
  );
  background-image: -moz-linear-gradient(
    top,
    rgba(254, 247, 179, 1) 0%,
    rgba(227, 139, 28, 1) 30%,
    rgba(253, 243, 176, 1) 60%
  );
  background-image: linear-gradient(
      top,
      rgba(254, 247, 179, 1) 0%,
      rgba(227, 139, 28, 1) 30%,
      rgba(253, 243, 176, 1) 60%
    )
    1 1;
  .box {
    overflow: hidden;
    background: #313131;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: bold;
    color: #ffd486;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}
</style>
